<template>
  <div class="tw-mobile-customization-block single" v-if="singleModel">
      <div v-for="(item, index) in data" :key="index" class="tw-mobile-customization-block-single-child">
        <div :style="{color: textColors[idx], fontSize: textFontList[idx]}" v-for="(entity, idx) in item" :key="idx">{{entity}}</div>
    </div>
  </div>
  <div v-else class="tw-mobile-customization-block">
    <div v-for="(item, index) in data" :key="index" class="tw-mobile-customization-block-child" :class="{'tw-sort-icon': showSortIcon}">
      <!-- <img v-if="index < 3" :src="require(`./assets/${index + 1}.png`)"> -->
      <div :class="{'icon x1': index === 0 && !idx, 'icon x2': index === 1 && !idx, 'icon x3': index === 2 && !idx}" :style="{color: textColors[idx], fontSize: textFontList[idx]}" v-for="(entity, idx) in item" :key="idx" v-html="entity"></div>
    </div>
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'customization-block',

  mixins: [props, style],

  props,

  computed: {
    style () {
      return {
        bgImg: this.bgImg,
        borderRadius: this.borderRadius,
        solidHeight: this.solidHeight,
        solidWidth: this.solidWidth,
        solidPosition: this.solidPosition,
        solidColor: this.solidColor,
        alignType: this.alignType,
        marginLeft: this.marginLeft
      }
    },

    textFontList () {
      return this.textFonts.split(',')
    }
  },

  created () {
  },

  methods: {
    setStyle () {
      let style = `
        ::root.tw-mobile-customization-block {
          text-align: ${this.alignType};
          border-radius: ${this.borderRadius};
        }

        ::root .tw-mobile-customization-block-child::after {
          width: ${this.solidWidth};
          height: ${this.solidHeight};
          margin-top: ${this.solidPosition};
          background-color: ${this.solidColor};
        }

        ::root .tw-mobile-customization-block-child div {
          margin-left: ${this.marginLeft};
        }
      `
      if (this.bgImg.length > 0) {
        style += `
          ::root.tw-mobile-customization-block {
          background: url('${this.$twApp.fileBaseUrl + this.bgImg[0].localPath}') no-repeat center;
        }`
      }
      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
